iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
0
自我挑戰組

使用flutter建構Android和iOs APP系列 第 13

提示框與光箱

  • 分享至 

  • xImage
  •  

目標:
1.按下刪除按鈕時,會跳出提示框提醒是否要刪除
2.按下product_create頁面的save時,會跳出光箱

如此gif

  1. pages/product.dart
    先定義好跳出提示框的function
  _showWarningDialog(BuildContext context) {
    showDialog(
        context: context,
        //一定要傳入基本訊息
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text('Are you sure?'),
            content: Text('This action cannot be undone!'),
            actions: <Widget>[
              FlatButton(
                child: Text('DISCARD'),
                onPressed: () {
                  Navigator.pop(context);
                  //基本訊息在這用上了
                  //回到上一層而已,不做其他事
                },
              ),
              FlatButton(
                child: Text('CONTINUE'),
                onPressed: () {
                  Navigator.pop(context);
                  Navigator.pop(context, true);
                  //回到上一層
                  //然後傳一個true到products.dart的Navigator後的then那邊
                  //因為那邊有寫deleteProduct
                  //所以就進行刪除
                },
              ),
            ],
          );
        });
  }

再註冊即可

...
 child: RaisedButton(
   color: Theme.of(context).accentColor,
   child: Text('DELETE'),
   onPressed: () => _showWarningDialog(context),
 ),
...
  1. pages/product_create.dart
    按下去以後叫出一個長在bottom的modal
child: RaisedButton(
  child: Text('Save'),
  onPressed: () {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return Center(
            child: Text('This is a Modal!'),
          );
        });
  },
),

主題來源:
Learn Flutter & Dart to Build iOS & Android Apps


上一篇
使用名稱管理route,並移動state到main.dart
下一篇
使用者輸入框
系列文
使用flutter建構Android和iOs APP25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言